/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #F16822;
  --ifm-color-primary-dark: #ab5124;
  --ifm-color-primary-darker: #914723;
  --ifm-color-primary-darkest: #9b4921;
  --ifm-color-primary-light: #e78e61;
  --ifm-color-primary-lighter: #e5956d;
  --ifm-color-primary-lightest: #e99c76;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  tab-size: 2;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #e66626;
  --ifm-color-primary-dark: #dc5e1f;
  --ifm-color-primary-darker: #db5f21;
  --ifm-color-primary-darkest: #d55b1e;
  --ifm-color-primary-light: #ef6b29;
  --ifm-color-primary-lighter: #ee7438;
  --ifm-color-primary-lightest: #f1773a;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

li[role="tab"] {
  border-radius: 0px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

:root {
  --javascript-official-color-black: #323330;
  --javascript-official-color-yellow: #f7df1e;
  --typescript-official-color-blue: #007acc;
  --typescript-official-color-white: #ffffff;
}
.javascript-tab {
  color: var(--javascript-official-color-black);
}

.javascript-tab:hover {
  border-bottom-color: var(--javascript-official-color-black);
}

.javascript-tab[aria-selected='true'] {
  color: var(--javascript-official-color-black);
    background-color: var(--javascript-official-color-yellow);
}

.typescript-tab {
  color: var(--typescript-official-color-blue);
}

.typescript-tab:hover {
  border-bottom-color: var(--typescript-official-color-blue);
}

.typescript-tab[aria-selected='true'] {
  color: var(--typescript-official-color-white);
    background-color: var(--typescript-official-color-blue);
}

.tabs-container .margin-top--md {
  margin-top: 0px !important;
}



#playground-iframe {
  width: 92vw; /* 92% of viewport width */
  height: 700px; /* Adjust height as needed */
  margin: 0; /* Remove any default margins */
  padding: 0; /* Remove any default padding */
}
